<template>
    <div class="lm">
        <Row class="margin-top-10">
            <Card>
                <p slot="title" class="card-title">
                    <Row class="" :gutter="10">
                        <Col :md="4" :lg="2">
                            <div style="margin-top: 2px;">
                                <Icon type="ios-pulse"></Icon>
                                {{this.$route.meta.title}}
                            </div>
                        </Col>
                        <Col :md="20" :lg="22">
                            <Form :model="formItem" label-position="left" inline>
                                类型：
                                <Select v-model="ltype" size="small" style="width:120px">
                                    <Option value="lotteries" key="0">官方彩种</Option>                                        
                                    <Option value="sysLts" key="1">系统彩种</Option>
                                </Select>
                                <!-- <span style="color: rgb(255, 49, 49);;margin-left:10px;">重要提醒：当修改了彩种开关或者倒计时时,保存后服务器需要重启以生效,大约需要1分钟！</span> -->
                            </Form>
                            
                        </Col>
                    </Row>
                </p>
                <div class="line-chart-con">
                    <Table v-if="ltype=='lotteries'" border stripe :columns="title" :data.sync="lotteriesList" ></Table>
                    <Table v-if="ltype=='sysLts'" border stripe :columns="title2" :data.sync="systemList" ></Table>
                </div>
            </Card>
        </Row>
    </div>
</template>
<style lang="less" scoped>
    // .ivu-form-item{
    //     margin-bottom:0px;
    // }
    .ivu-card-head-inner, .ivu-card-head p{
        height: auto;
        overflow: inherit;
        
    }
    .page-margin-top{
        margin-top:10px;
    }
    .ivu-modal-wrap{
        display: flex;
        align-items: center;
        justify-content: center;

        .ivu-modal{
            top: 0;
        }
    }
    .lm{
        
    }
    
</style>
<script>


export default {
    components: {
        
    },
    data () {
        return {
            ltype:"sysLts",
            formItem:{
                input:''
            },
            lotteriesList: [],
            systemList: [],
            sysLts:[],
            model2: '',
            thisdata:{},
            systemdData:{},            
            title:[
                {
                    title:'彩种',
                    key: 'name_cn',
                    align:'center',
                    // width:'100'
                },
                {
                    title:'开启/关闭',
                    key: 'online',
                    align:'center',
                    // width:'100'
                    render: (h, params) => {
                        let td=this.thisdata[params.index]
                        let online=td&&td.hasOwnProperty("online")?td.online:params.row.online
                        return h('div', [
                            h('Button', {
                                props: {
                                    size: 'small',
                                    type:online?'warning':'info'
                                },
                                on: {
                                    click: () => {
                                        this.tChange(params.index,!online,'online')
                                    },
                                }
                            },online?'关闭彩种':'开启彩种')
                        ]);
                    }
                },
                {
                    title:'封盘倒计时',
                    key: 'remain_second',
                    align:'center',
                    // width:'90'
                    render: (h, params) => {
                        return h('div',[
                            h('Input', {
                                props: {
                                    size: 'small',
                                    value:this.thisdata[params.index]&&this.thisdata[params.index].hasOwnProperty("remain_second") ? this.thisdata[params.index].remain_second : params.row.remain_second,
                                    number:true
                                },
                                style:{
                                    width:'100px',
                                    top: '0px',
                                    left: 'calc(50% - 50px)',
                                },
                                on:{
                                    input:(e) => {
                                        this.tChange(params.index,e,'remain_second')
                                    }
                                }
                            },[
                                h('span', {
                                    slot:'append'
                                },'秒')
                            ])
                        ])
                    }
                },
                {
                    title:'投注间隔',
                    key: 'bet_before_minute',
                    align:'center',
                    render: (h, params) => {
                        return h('div',{style:{position:'relative'}},[
                            h('Input', {
                                props: {
                                    size: 'small',
                                    value:this.thisdata[params.index]&&this.thisdata[params.index].hasOwnProperty("bet_before_minute") ? this.thisdata[params.index].bet_before_minute : params.row.bet_before_minute,
                                    number:true
                                },
                                style:{
                                    width:'120px',
                                    top: '0px',
                                    left: 'calc(50% - 60px)'
                                },
                                on:{
                                    input:(e) => {
                                        this.tChange(params.index,e,'bet_before_minute')
                                    }
                                }
                            },[
                                h('span', {
                                    slot:'append'
                                },'分钟')
                            ])
                        ])
                    }
                },
                {
                    title:'操作',
                    key: '',
                    align:'center',
                    // width:'100'
                    render: (h, params) => {
                        let _this=this
                        return h('div',[
                            h('Button', {
                                props: {
                                    size: 'small',
                                    type:'primary',
                                    disabled:this.thisdata[params.index]?false:true
                                },
                                style:{
                                    
                                },
                                on:{
                                    click(){
                                        _this.tChangeRevise(params.index,params.row)
                                    }
                                }
                            },'保存'),
                            h('Button', {
                                props: {
                                    size: 'small',
                                    disabled:this.thisdata[params.index]?false:true
                                },
                                style:{
                                    'margin-left':'10px'
                                },
                                on:{
                                    click(){
                                        _this.tChangeCancel(params.index)
                                    }
                                }
                            },'取消')
                        ])
                    }
                }
            ],
            title2:[
                {
                    title:'彩种',
                    key: 'name_cn',
                    align:'center',
                    // width:'100'
                },
                {
                    title:'开启/关闭',
                    key: 'online',
                    align:'center',
                    // width:'100'
                    render: (h, params) => {
                        let td=this.systemdData[params.index]
                        let online=td&&td.hasOwnProperty("online")?td.online:params.row.online
                        return h('div', [
                            h('Button', {
                                props: {
                                    size: 'small',
                                    type:online?'warning':'info'
                                },
                                on: {
                                    click: () => {
                                        
                                        this.tChange(params.index,!online,'online')
                                    },
                                }
                            },online?'关闭彩种':'开启彩种')
                        ]);
                    }
                },
                {
                    title:'封盘倒计时',
                    key: 'remain_second',
                    align:'center',
                    // width:'90'
                    render: (h, params) => {
                        return h('div',[
                            h('Input', {
                                props: {
                                    size: 'small',
                                    value:this.systemdData[params.index]&&this.systemdData[params.index].hasOwnProperty("remain_second") ? this.systemdData[params.index].remain_second : params.row.remain_second,
                                    number:true
                                },
                                style:{
                                    width:'100px',
                                    top: '0px',
                                    left: 'calc(50% - 50px)',
                                },
                                on:{
                                    input:(e) => {
                                        this.tChange(params.index,e,'remain_second')
                                    }
                                }
                            },[
                                h('span', {
                                    slot:'append'
                                },'秒')
                            ])
                        ])
                    }
                },
                {
                    title:'投注间隔',
                    key: 'bet_before_minute',
                    align:'center',
                    render: (h, params) => {
                        return h('div',{style:{position:'relative'}},[
                            h('Input', {
                                props: {
                                    size: 'small',
                                    value:this.systemdData[params.index]&&this.systemdData[params.index].hasOwnProperty("bet_before_minute") ? this.systemdData[params.index].bet_before_minute : params.row.bet_before_minute,
                                    number:true
                                },
                                style:{
                                    width:'120px',
                                    top: '0px',
                                    left: 'calc(50% - 60px)'
                                },
                                on:{
                                    input:(e) => {
                                        this.tChange(params.index,e,'bet_before_minute')
                                    }
                                }
                            },[
                                h('span', {
                                    slot:'append'
                                },'分钟')
                            ])
                        ])
                    }
                },
                {
                    title:'开奖模式',
                    key: '',
                    align:'center',
                    render: (h, params) => {
                        let _this=this
                        let profit= this.forPattern(params.row)
                        return h('ButtonGroup',{
                            props:{
                                size: 'small',
                                shape:'circle'
                            }
                        },[
                            h('Button', {
                                props: {
                                    type:profit.data.is_profit==false?'primary':'ghost',
                                },
                                style:{
                                    
                                },
                                on:{
                                    click(){
                                        if(profit.data.is_profit!==false){
                                            _this.changeProfit(profit,false)
                                        }
                                    }
                                }
                            },'预设模式'),
                            h('Button', {
                                props: {
                                    type:profit.data.is_profit==true?'primary':'ghost',
                                },
                                style:{
                                    
                                },
                                on:{
                                    click(){
                                        if(profit.data.is_profit!==true){
                                            _this.changeProfit(profit,true)
                                        }
                                    }
                                }
                            },'盈利模式')
                        ])
                    }
                },
                {
                    title:'操作',
                    key: '',
                    align:'center',
                    // width:'100'
                    render: (h, params) => {
                        let _this=this
                        return h('div',[
                            h('Button', {
                                props: {
                                    size: 'small',
                                    type:'primary',
                                    disabled:this.systemdData[params.index]?false:true
                                },
                                style:{
                                    
                                },
                                on:{
                                    click(){
                                        _this.tChangeRevise(params.index,params.row)
                                    }
                                }
                            },'保存'),
                            h('Button', {
                                props: {
                                    size: 'small',
                                    disabled:this.systemdData[params.index]?false:true
                                },
                                style:{
                                    'margin-left':'10px'
                                },
                                on:{
                                    click(){
                                        _this.tChangeCancel(params.index)
                                    }
                                }
                            },'取消')
                        ])
                    }
                }
            ]

                
            
        }
    },
    computed: {
        
    },
    methods: {
        init () {
            this.getGameLotteries()
        },
        tChange(i,e,n){
            let t,l
            switch(this.ltype)
            {
                case "lotteries":
                    t=this.thisdata
                    l=this.lotteriesList
                    break;
                case "sysLts":
                    t=this.systemdData
                    l=this.systemList
                    break;
            }
            if(t[i]){
                this.$set(t[i],n,e)
                for (var Key in t[i]){
                    if(t[i][Key]===l[i][Key]){
                        this.$delete(t[i],Key)
                    }
                }
                if(JSON.stringify(t[i])==="{}"){
                    this.$delete(t,i)
                }
            }else{
                this.$set(t,i,{})
                this.$set(t[i],n,e)
            }
        },
        tChangeRevise(i,r){
            let data={
                Table: 'lotteries',
                Lotteries: {
                    ...r,
                    ...this.ltype=='lotteries'?this.thisdata[i]:this.systemdData[i]
                }
            }
            this.setGameLotteries(i,data)
        },
        changeProfit(r,b){
            let data={
                Table: this.ltype,
                sysLts: {
                    ...r.data,
                }
            }
            data.sysLts.is_profit=b
            this.$api.repeater(this,'setGameLotteries',data).then(res=>{
                if(res.success==true){
                    if(data.Table=="sysLts"){
                        // this.$set(this.sysLts,i,res.data.sysLts)
                        this.sysLts[r.index].is_profit=res.data.SysLts.is_profit
                        this.$Notice.success({
                            title: '切换成功',
                            desc: res.info
                        });
                    }
                }else{
                    this.$Notice.error({
                        title: '切换失败',
                        desc: res.error
                    });
                }
            })
            // this.$api.setGameLotteries(data).then(response=>{
            //     response.json().then(responseJson=> {
            //         if(responseJson.success==true){
            //             if(data.Table=="sysLts"){
            //                 // this.$set(this.sysLts,i,responseJson.data.sysLts)
            //                 this.sysLts[r.index].is_profit=responseJson.data.SysLts.is_profit
            //                 this.$Notice.success({
            //                     title: '切换成功',
            //                     desc: responseJson.info
            //                 });
            //             }
            //         }else{
            //             this.$Notice.error({
            //                 title: '切换失败',
            //                 desc: responseJson.error
            //             });
            //         }
            //     })
            // })
        },
        tChangeCancel(i){
            switch(this.ltype)
            {
                case "lotteries":
                this.$delete(this.thisdata,i)
                    break;
                case "sysLts":
                this.$delete(this.systemdData,i)
                    break;
            }
        },
        forPattern(r){
            for(let i=0;i<this.sysLts.length;i++){
                if(r.gid==this.sysLts[i].gid){
                    return {data:this.sysLts[i],index:i}
                }
            }
        },
        getGameLotteries () {
            this.$api.repeater(this,'getGameLotteries').then(res=>{
                for(let i=0;i<res.lotteries.length;i++){
                    if(res.lotteries[i].system_lt){
                        this.systemList.push(res.lotteries[i])
                    }else{
                        this.lotteriesList.push(res.lotteries[i])
                    }
                }
                this.sysLts=res.sysLts
            })
            // this.$api.getGameLotteries().then(response=>{
            //     response.json().then(responseJson=> {
            //         for(let i=0;i<responseJson.lotteries.length;i++){
            //             if(responseJson.lotteries[i].system_lt){
            //                 this.systemList.push(responseJson.lotteries[i])
                            
            //             }else{
            //                 this.lotteriesList.push(responseJson.lotteries[i])
            //             }
            //         }
            //         this.sysLts=responseJson.sysLts
            //     })
            // })
        },
        setGameLotteries (i,data) {
            this.$api.repeater(this,'setGameLotteries',data).then(res=>{
                if(res.success==true){
                    if(this.ltype=="lotteries"){
                        this.$set(this.lotteriesList,i,res.data.Lotteries)
                    }else{
                        this.$set(this.systemList,i,res.data.Lotteries)
                    }
                    this.tChangeCancel(i)
                    this.$Notice.success({
                        title: '保存成功',
                        desc: res.info
                    });
                }else{
                    this.$Notice.error({
                        title: '保存失败',
                        desc: res.error
                    });
                }
            })
            // this.$api.setGameLotteries(data).then(response=>{
            //     response.json().then(responseJson=> {
            //         if(responseJson.success==true){
            //             if(this.ltype=="lotteries"){
            //                 this.$set(this.lotteriesList,i,responseJson.data.Lotteries)
            //             }else{
            //                 this.$set(this.systemList,i,responseJson.data.Lotteries)
            //             }
            //             this.tChangeCancel(i)
            //             this.$Notice.success({
            //                     title: '保存成功',
            //                     desc: responseJson.info
            //                 });
            //         }else{
            //             this.$Notice.error({
            //                     title: '保存失败',
            //                     desc: responseJson.error
            //                 });
            //         }
            //     })
            // })
        }
    },
    mounted (){
        this.init()
    }
};
</script>
